<script setup lang="ts">
import { ref } from 'vue';
import { NDrawer, NDrawerContent, NDescriptions, NDescriptionsItem, NTag, NButton, NSpace, useMessage } from 'naive-ui';
import { fetchQueryHistoryDetail } from '@/service/api';

defineOptions({
  name: 'QueryHistoryDrawer'
});

const message = useMessage();

const visible = ref(false);
const loading = ref(false);
const historyDetail = ref<Api.DataPlatform.QueryHistory | null>(null);

// 打开抽屉
async function open(id: number) {
  visible.value = true;
  loading.value = true;
  try {
    const { data } = await fetchQueryHistoryDetail(id);
    if (data) {
      historyDetail.value = data;
    }
  } catch (error) {
    message.error('加载查询历史详情失败');
  } finally {
    loading.value = false;
  }
}

// 关闭抽屉
function close() {
  visible.value = false;
  historyDetail.value = null;
}

// 状态标签
function getStatusTag(status: string) {
  const statusMap: Record<string, { label: string; type: 'success' | 'error' }> = {
    SUCCESS: { label: '成功', type: 'success' },
    FAILED: { label: '失败', type: 'error' }
  };
  return statusMap[status] || { label: status, type: 'error' };
}

// 查询类型标签
function getQueryTypeTag(type: string) {
  const typeMap: Record<string, { label: string; type: 'info' | 'success' }> = {
    SQL: { label: 'SQL查询', type: 'info' },
    VISUAL: { label: '可视化查询', type: 'success' }
  };
  return typeMap[type] || { label: type, type: 'info' };
}

defineExpose({
  open
});
</script>

<template>
  <NDrawer v-model:show="visible" :width="800" placement="right">
    <NDrawerContent title="查询历史详情" closable>
      <div v-if="historyDetail" class="flex-col gap-16px">
        <NDescriptions bordered :column="1" size="small">
          <NDescriptionsItem label="查询名称">
            {{ historyDetail.queryName || '-' }}
          </NDescriptionsItem>

          <NDescriptionsItem label="查询类型">
            <NTag :type="getQueryTypeTag(historyDetail.queryType).type">
              {{ getQueryTypeTag(historyDetail.queryType).label }}
            </NTag>
          </NDescriptionsItem>

          <NDescriptionsItem label="数据源">
            {{ historyDetail.datasourceName || '-' }}
          </NDescriptionsItem>

          <NDescriptionsItem label="SQL内容">
            <pre class="bg-gray-100 p-8px rounded text-12px overflow-auto max-h-300px">{{ historyDetail.sqlContent }}</pre>
          </NDescriptionsItem>

          <NDescriptionsItem v-if="historyDetail.queryConfig" label="查询配置">
            <pre class="bg-gray-100 p-8px rounded text-12px overflow-auto max-h-200px">{{ historyDetail.queryConfig }}</pre>
          </NDescriptionsItem>

          <NDescriptionsItem label="执行时间">
            {{ historyDetail.executionTime }}ms
          </NDescriptionsItem>

          <NDescriptionsItem label="结果行数">
            {{ historyDetail.resultCount || 0 }}
          </NDescriptionsItem>

          <NDescriptionsItem label="状态">
            <NTag :type="getStatusTag(historyDetail.status).type">
              {{ getStatusTag(historyDetail.status).label }}
            </NTag>
          </NDescriptionsItem>

          <NDescriptionsItem v-if="historyDetail.errorMessage" label="错误信息">
            <pre class="text-red-500 text-12px">{{ historyDetail.errorMessage }}</pre>
          </NDescriptionsItem>

          <NDescriptionsItem label="创建者">
            {{ historyDetail.createByName || '-' }}
          </NDescriptionsItem>

          <NDescriptionsItem label="创建时间">
            {{ historyDetail.createTime }}
          </NDescriptionsItem>

          <NDescriptionsItem v-if="historyDetail.remark" label="备注">
            {{ historyDetail.remark }}
          </NDescriptionsItem>
        </NDescriptions>
      </div>

      <template #footer>
        <NSpace justify="end">
          <NButton @click="close">关闭</NButton>
        </NSpace>
      </template>
    </NDrawerContent>
  </NDrawer>
</template>

<style scoped></style>
